<!-- 历史数据查询 -->

<script setup lang="ts">
import * as echarts from 'echarts'
import moment from 'moment'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'

const tabActiveIndex = ref(0)
const topNav = ref([
  { text: '用电历史数据', dm: '2', xzcs: 'dljc' },
  { text: '蒸汽历史数据', dm: '3', xzcs: 'zqjc' },
  { text: '水务历史数据', dm: '1', xzcs: 'swjc' },
  { text: '燃气历史数据', dm: '4', xzcs: 'rqjc' },
  { text: '煤历史数据', dm: '5', xzcs: 'ymjc' },
])

//tab切换
const tabClick = (item: any, index: any) => {
  nylx.value = item.dm
  tabActiveIndex.value = index
  getQylb() //重新查询企业数据
}
//搜索值
const formInline = reactive({
  mblx: 0,
  times: [
    moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss'),
    moment().format('YYYY-MM-DD HH:mm:ss'),
  ],
})

const nylx = ref('2') //能源类型
const dayChartEchartRef = ref(null) as any //日图表
const yearChartEchartRef = ref(null) as any //年图表
const nodeActive = ref({}) //当前点击选中的点

/** tree start */
const treeRef = ref(null) as any
const defaultProps = {
  children: 'jcdwList',
  label: 'mc',
}
const treeData: any = ref([])

//加载企业信息
const getQylb = async () => {
  //查询企业列表
  await queryQylb({ nylx: nylx.value }).then((res: any) => {
    treeData.value = res?.map((item: any) => {
      const children = item?.jcdwList?.map((i: any) => {
        i.mc = i.dwmc
        return {
          ...i,
        }
      })
      return {
        ...item,
        mc: item.qymc,
        children,
      }
    })

    if (treeData.value.length > 0) {
      if (treeData.value[0].children && treeData.value[0].children.length > 0) {
        //选中的节点
        nodeActive.value = treeData.value[0].children[0]
      }

      treeRef.value.defaultActive(treeData.value[0].id) //默认展开高亮操作

      // query()
      treeClick(treeData.value[0], null)
    }
  })
}
/** tree end */

// 日用电量
//单日单量
const dayChartOption = {
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '暂无数据',
        font: '14px Microsoft YaHei',
      },
    },
  ],
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  title: {
    text: '',
    left: 'center',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  legend: {
    left: 'left',
    data: [],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  series: [
    {
      name: '',
      type: 'bar',
      barWidth: 14,
      borderRadius: 7,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#6262F6' },
          { offset: 1, color: '#3FB2EE' },
        ]),
      },
      data: [],
    },
  ],
}
onMounted(() => {
  dayChartEchartRef?.value.initEchat(dayChartOption)
})
const dayChartInit = (data: any) => {
  //查询
  queryJcdwDayHistoryInfo({
    mbId: data.id,
    mblx: formInline.mblx,
    nylx: nylx.value,
    startTime: formInline.times[0],
    endTime: formInline.times[1],
  }).then((res: any) => {
    dayChartOption.xAxis.data = res.sjList
    dayChartOption.legend.data = [data.legend]
    dayChartOption.series[0].name = data.legend
    dayChartOption.series[0].data = res.dwHistoryInfoList[0].ylz || []
    dayChartOption.title.text = res.dwHistoryInfoList[0].ylx + '/' + res.dwHistoryInfoList[0].ylxDw

    if (dayChartOption.series[0].data.length > 0) {
      dayChartOption.graphic = null
    }
    //调echart 初始化方法
    dayChartEchartRef?.value.initEchat(dayChartOption)
  })
}

// 年用电量
// echart 数据 年度用电量
const yearChartOption = {
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '暂无数据',
        font: '14px Microsoft YaHei',
      },
    },
  ],
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  title: {
    text: '',
    left: 'center',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  legend: {
    data: [],
    left: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  series: [
    {
      name: '',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#0F86E8',
          lineStyle: {
            color: '#0F86E8',
          },
        },
      },
      data: [],
    },
  ],
}
onMounted(() => {
  yearChartEchartRef?.value.initEchat(yearChartOption)
})
const yearChartInit = async (data: any) => {
  await queryJcdwyearHistoryInfo({ mbId: data.id, mblx: formInline.mblx, nylx: nylx.value }).then((res: any) => {
    yearChartOption.xAxis.data = res.sjList
    yearChartOption.legend.data = [data.legend]
    yearChartOption.series[0].name = data.legend
    yearChartOption.series[0].data = res.dwHistoryInfoList[0].ylz || []
    yearChartOption.title.text = res.dwHistoryInfoList[0].ylx + '/' + res.dwHistoryInfoList[0].ylxDw

    if (yearChartOption.series[0].data.length > 0) {
      yearChartOption.graphic = null
    }
    //调echart 初始化方法
    yearChartEchartRef?.value.initEchat(yearChartOption)
  })
}
//节点点击事件
const treeClick = (data: any, node: any) => {
  //当前点击过的节点
  nodeActive.value = data
  query()
}

//查询点击
const query = () => {
  const data: any = nodeActive.value
  //点位
  if (!('wd' in data)) {
    data.legend = `${data.ssqyMc}-${data.mc.replace(data.ssqyMc, '')}-${data.dwbh}`
    formInline.mblx = 2
    //日
    dayChartInit(data)
    //年
    yearChartInit(data)
  }
  //企业
  else {
    data.legend = data.mc
    formInline.mblx = 1
    //日
    dayChartInit(data)
    //年
    yearChartInit(data)
  }
}

//重置参数
const restart = () => {
  formInline.times = [
    moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss'),
    moment().format('YYYY-MM-DD HH:mm:ss'),
  ]
  query()
}

//初始化
onMounted(() => {
  getQylb()
})
</script>

<template>
  <!-- tab -->
  <div class="flex items-center h-60px pl-10px bg-[#f8f8f8]">
    <div v-for="(item, index) in topNav" :key="index"
      class="w-150px h-36px lh-36px mr-10px text-center text-[#333] bg-[#dceeff] rounded-18px cursor-pointer"
      :class="{ 'tab-active': tabActiveIndex === index }" @click="tabClick(item, index)">
      {{ item.text }}
    </div>
  </div>

  <div class="flex flex-row p-10px box-border" style="height: calc(100% - 100px)">
    <!-- tree -->
    <div class="w-330px box-border" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <!-- 企业列表 -->
      <EnterpriseList ref="treeRef" :tree-data="treeData" :default-props="defaultProps" @tree-click="treeClick">
      </EnterpriseList>
    </div>

    <div class="ml-10px" style="flex: 1">
      <div class="flex flex-col h-100%">
        <div class="h-70px mb-10px p-40px pt-18px pb-18px box-border"
          style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
          <el-form :inline="true" :model="formInline" class="flex justify-between">
            <el-form-item label="选择时间范围">
              <el-date-picker v-model="formInline.times" type="daterange" range-separator="至" unlink-panels
                start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>

            <el-form-item style="margin-right: 0">
              <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="query">查询</el-button>
              <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="restart">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="mb-10px" style="flex: 1; box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
          <!-- 柱状图 -->
          <Echarts ref="dayChartEchartRef" />
        </div>

        <div style="flex: 1; box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
          <div class="h-50px lh-50px pl-20px text-16px font-bold text-[#333] bg-[#f8f8f8]">
            年度累计能耗
          </div>
          <!-- 折线图 -->
          <Echarts ref="yearChartEchartRef" height="calc(100% - 50px)" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tab-active {
  font-size: 16px;
  font-weight: 700;
  color: #fff !important;
  background-color: #1990ff !important;
}
</style>
